<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="flex">
        <!-- 搜索 -->
        <el-input
          v-model="query.userId"
          clearable
          size="small"
          placeholder="请输入用户姓名/身份证号"
          style="width: 200px;"
          class="filter-item"
        />

        <date-range-picker
          :disabled-date-type="DisabledDateTypeMap.ToDayAndRight"
          class="date-select-item"
          @update:creatTime="val=>query.createTime = val"
        />
        <rrOperation />
      </div>
      <crudOperation show :permission="permission" />
    </div>

    <el-dialog> <p>弹窗</p> </el-dialog>

    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data.list" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="编号">
        <template slot-scope="scope">
          <span>\{{ scope.$index | indexMethod(crud.page.page, crud.page.size) }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="id" width="130" label="昵称" />
      <el-table-column :show-overflow-tooltip="true" prop="nickname" width="130" label="姓名" />

      <el-table-column :show-overflow-tooltip="true" prop="registerTime" label="身份证号">
        <template slot-scope="scope">
          <span>\{{ parseTime(scope.row.registerTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证照片">
        <template>
          <span class="blue pointer" @click="()=>{dialogVisible=true}">查看身份证</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="" label="认证时间">
        <template slot-scope="scope">
          <span>\{{ parseTime(scope.row.registerTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="" label="状态">
        <template slot-scope="scope">
          <span>\{{ scope.row.hasWithdrawAmount | formatMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            :disabled-dle="scope.row.id === 1"
            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>

import CRUD, { presenter, header, crud, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { mapGetters } from 'vuex'
{{#if hasApi}}
import {{dir}}, { TESTAPI } from '@/api/business/{{dir}}' // 根据需要手动修改
{{/if}}
import { DisabledDateTypeMap } from '@/utils'
import DateRangePicker from '@/components/DateRangePicker'
{{#if hasApi}}
console.log(TESTAPI)
{{/if}}
const defaultForm = {
}
export default {
  name: '{{properCase dir}}',
  components: { rrOperation, pagination, crudOperation, DateRangePicker, udOperation },
  cruds() {
    return CRUD({
      title: '用户',
      url: 'admin/user/list',
      {{#if hasApi}}crudMethod: { ...{{dir}} },{{/if}}
      query: { type: '1' },
      sort: '',
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: true
      }
    })
  },
  mixins: [presenter(), header(), crud(), form(defaultForm)],
  data() {
    return {
      permission: {
        edit: ['admin', 'user/list'],
        add: ['admin', 'user/list'],
        del: ['admin', 'user/list'],
        export: ['admin', 'user/list']
      },
      DisabledDateTypeMap: DisabledDateTypeMap,
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 刷新钩子
    [CRUD.HOOK.beforeRefresh](crud) {},
    [CRUD.HOOK.afterRefresh](crud) {},
    // 新增
    [CRUD.HOOK.beforeToAdd](crud) {},
    [CRUD.HOOK.afterToAdd](crud) { },
    // 提交钩子
    [CRUD.HOOK.beforeSubmit](crud) {},
    [CRUD.HOOK.afterSubmit](crud) {}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .flex {
    display: flex;
    display: -webkit-flex;
  }
  .date-select-item {
    margin-right: 6px;
  }
</style>

